<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="城市编码" v-model.trim="whZtDisplay.cityNo"> </el-input>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" v-if="whZtDisplayManager_btn_add" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
		</div>
		<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="65">
				<template scope="scope"><span>{{scope.$index+(whZtDisplay.page - 1) * whZtDisplay.limit + 1}} </span></template>
			</el-table-column>
			<el-table-column align="center" label="id" width="65" v-if="false">
				<template scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="城市编码">
				<template scope="scope">
					<span>{{scope.row.cityNo}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="服务编码">
				<template scope="scope">
					<span>{{scope.row.serviceCode}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="签发等级">
				<template scope="scope">
					<span>{{scope.row.signLevel}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="服务id">
				<template scope="scope">
					<span>{{scope.row.serviceId}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="服务名称">
				<template scope="scope">
					<span>{{scope.row.serviceName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="服务描述">
				<template scope="scope">
					<span>{{scope.row.serviceDesc}}</span>
				</template>
			</el-table-column>
			<el-table-column width="500px" align="center" label="按钮URL">
				<template scope="scope">
					<span>{{scope.row.serviceIconUrl}}</span>
				</template>
			</el-table-column>
			<el-table-column width="500px" align="center" label="访问URL">
				<template scope="scope">
					<span>{{scope.row.serviceAccessUrl}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="角标类型">
				<template scope="scope">
					<span>{{scope.row.cornerType}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="角标名称">
				<template scope="scope">
					<span>{{scope.row.cornerName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="是否校验密码">
				<template scope="scope">
					<span>{{scope.row.verifyPwd}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="状态">
				<template scope="scope">
					<span>{{scope.row.status}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="排序号">
				<template scope="scope">
					<span>{{scope.row.sortBy}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="备注">
				<template scope="scope">
					<span>{{scope.row.memo}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="展台标识">
				<template scope="scope">
					<span>{{scope.row.ztFlag}}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" align="center" label="操作" width="150">
				<template scope="scope">
					<el-button v-if="whZtDisplayManager_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
					</el-button>
					<el-button v-if="whZtDisplayManager_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="whZtDisplay.page" :page-sizes="[10,20,30, 50]" :page-size="whZtDisplay.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
		</div>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="城市编码" prop="cityNo">
					<el-input v-model="form.cityNo" placeholder="请输入城市编码"></el-input>
				</el-form-item>
				<el-form-item label="服务编码" prop="serviceCode">
					<el-input v-model="form.serviceCode" placeholder="请输入服务编码"></el-input>
				</el-form-item>
				<el-form-item label="签发等级" prop="signLevel">
					<el-input v-model="form.signLevel" placeholder="请输入签发等级"></el-input>
				</el-form-item>
				<el-form-item label="服务id" prop="serviceId">
					<el-input v-model="form.serviceId" placeholder="请输入服务id"></el-input>
				</el-form-item>
				<el-form-item label="服务名称" prop="serviceName">
					<el-input v-model="form.serviceName" placeholder="请输入服务名称"></el-input>
				</el-form-item>
				<el-form-item label="服务描述" prop="serviceDesc">
					<el-input v-model="form.serviceDesc" placeholder="请输入服务描述"></el-input>
				</el-form-item>
				<el-form-item label="按钮URL" prop="serviceIconUrl">
					<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="form.serviceIconUrl" placeholder="请输入按钮URL"></el-input>
				</el-form-item>
				<el-form-item label="访问URL" prop="serviceAccessUrl">
					<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="form.serviceAccessUrl" placeholder="请输入访问URL"></el-input>
				</el-form-item>
				<el-form-item label="角标类型" prop="cornerType">
					<el-input v-model="form.cornerType" placeholder="请输入角标类型"></el-input>
				</el-form-item>
				<el-form-item label="角标名称" prop="cornerName">
					<el-input v-model="form.cornerName" placeholder="请输入角标名称"></el-input>
				</el-form-item>
				<el-form-item label="是否校验密码" prop="verifyPwd">
					<el-input v-model="form.verifyPwd" placeholder="请输入是否校验密码：1需要；2不需要"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-input v-model="form.status" placeholder="请输入状态：1,可用，其它：不可用"></el-input>
				</el-form-item>
				<el-form-item label="排序号" prop="sortBy">
					<el-input v-model="form.sortBy" placeholder="请输入排序号"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="memo">
					<el-input v-model="form.memo" placeholder="请输入备注"></el-input>
				</el-form-item>
				<el-form-item label="展台标识" prop="ztFlag">
					<el-input v-model="form.ztFlag" placeholder="请输入展台标识"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
				<el-button v-else type="primary" @click="update('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		page,
		addObj,
		getObj,
		delObj,
		putObj
	} from 'api/admin/whZtDisplay/index';
	import { mapGetters } from 'vuex';
	export default {
		name: 'whZtDisplay',
		data() {
			return {
				form: {
					cityNo: undefined,
					serviceCode: undefined,
					signLevel: undefined,
					serviceId: undefined,
					serviceName: undefined,
					serviceDesc: undefined,
					serviceIconUrl: undefined,
					serviceAccessUrl: undefined,
					cornerType: undefined,
					cornerName: undefined,
					verifyPwd: undefined,
					status: undefined,
					sortBy: undefined,
					memo: undefined,
					ztFlag: undefined
				},
				rules: {
					/*  cityNo: [
  {
    required: true,
    message: '请输入城市编码',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceCode: [
  {
    required: true,
    message: '请输入类似展台的服务编码',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   signLevel: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceId: [
  {
    required: true,
    message: '请输入服务id',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceName: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceDesc: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceIconUrl: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   serviceAccessUrl: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   cornerType: [
  {
    required: true,
    message: '请输入角标类型',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   cornerName: [
  {
    required: true,
    message: '请输入角标名称',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   verifyPwd: [
  {
    required: true,
    message: '请输入是否校验密码：1需要；2不需要',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   status: [
  {
    required: true,
    message: '请输入状态：1,可用，其它：不可用',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   sortBy: [
  {
    required: true,
    message: '请输入排序号',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   memo: [
  {
    required: true,
    message: '请输入',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
],   ztFlag: [
  {
    required: true,
    message: '请输入平台标识',
    trigger: 'blur'
  },
  {
    min: 3,
    max: 20,
    message: '长度在 3 到 20 个字符',
    trigger: 'blur'
  }
]  */
				},
				list: null,
				total: null,
				listLoading: true,
				whZtDisplay: {
					page: 1,
					limit: 10
				},
				dialogFormVisible: false,
				dialogStatus: '',
				whZtDisplayManager_btn_edit: false,
				whZtDisplayManager_btn_del: false,
				whZtDisplayManager_btn_add: false,
				textMap: {
					update: '编辑',
					create: '创建'
				},
				tableKey: 0
			}
		},
		created() {
			this.getList();
			this.whZtDisplayManager_btn_edit = this.elements['whZtDisplayManager:btn_edit'];
			this.whZtDisplayManager_btn_del = this.elements['whZtDisplayManager:btn_del'];
			this.whZtDisplayManager_btn_add = this.elements['whZtDisplayManager:btn_add'];
		},
		computed: {
			...mapGetters([
				'elements'
			])
		},
		methods: {
			getList() {
				this.listLoading = true;
				page(this.whZtDisplay)
					.then(response => {
						this.list = response.data.rows;
						this.total = response.data.total;
						this.listLoading = false;
					})
			},
			handleFilter() {
				this.getList();
			},
			handleSizeChange(val) {
				this.whZtDisplay.limit = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.whZtDisplay.page = val;
				this.getList();
			},
			handleCreate() {
				this.resetTemp();
				this.dialogStatus = 'create';
				this.dialogFormVisible = true;
			},
			handleUpdate(row) {
				getObj(row.id)
					.then(response => {
						this.form = response.data;
						this.dialogFormVisible = true;
						this.dialogStatus = 'update';
					});
			},
			handleDelete(row) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						delObj(row.id)
							.then(() => {
								this.$notify({
									title: '成功',
									message: '删除成功',
									type: 'success',
									duration: 2000
								});
								const index = this.list.indexOf(row);
								this.list.splice(index, 1);
							});
					});
			},
			create(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						addObj(this.form)
							.then((result) => {
								if(result.status == 0) {
									this.dialogFormVisible = false;
									this.getList();
									this.$notify({
										title: '成功',
										message: result.message,
										type: 'success',
										duration: 2000
									});
								} else {
									this.$notify({
										title: '失败',
										message: result.message,
										type: 'warning',
										duration: 2000
									});
								}
							})
					} else {
						return false;
					}
				});
			},
			cancel(formName) {
				this.dialogFormVisible = false;
				const set = this.$refs;
				set[formName].resetFields();
			},
			update(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						this.form.password = undefined;
						putObj(this.form.id, this.form).then((result) => {
							if(result.status == 0) {
								this.dialogFormVisible = false;
								this.getList();
								this.$notify({
									title: '成功',
									message: result.message,
									type: 'success',
									duration: 2000
								});
							} else {
								this.$notify({
									title: '失败',
									message: result.message,
									type: 'warning',
									duration: 2000
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			resetTemp() {
				this.form = {
					username: undefined,
					name: undefined,
					sex: '男',
					password: undefined,
					description: undefined
				};
			}
		}
	}
</script>